<include target="_header.html" />
<!--%load_js_plugin("ui.datepicker")-->
<script>
    function moveDate() {
        xGetElementById('fo_calendar').submit();
        return true;
    }
</script>
<form action="./index.php" method="get" id="fo_calendar">
    <input type="hidden" name="module" value="{$module}" />
    <input type="hidden" name="act" value="{$act}" />
    <input type="hidden" name="selected_date" id="selected_date" value="{zDate('Ymd',$selected_date)}" />
	<table class="x_table x_table-striped x_table-hover">
		<thead>
			<tr>
				<th scope="row">{$lang->total_counter}</th>
				<th scope="row">
					<span id="str_selected_date">{zdate($selected_date, "Y-m-d")}</span>
					<input type="hidden" class="inputDate" value="{zdate($selected_date,'Y-m-d')}" />
				</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Visitor <strong>{number_format($total_counter->unique_visitor)}</strong> &nbsp;/&nbsp; Pageview : <strong>{number_format($total_counter->pageview)}</strong></td>
				<td>Visitor : <strong>{number_format($selected_day_counter->unique_visitor)}</strong> &nbsp;/&nbsp; Pageview : <strong>{number_format($selected_day_counter->pageview)}</strong></td>
			</tr>
		</tbody>
    </table>
	<style scoped>
		.ui-datepicker-trigger{cursor:pointer;border:0;background:none;padding:0}
	</style>
	<script>
	(function($){
		$(function(){
			var option = {
				gotoCurrent: false
				,yearRange:'-100:+10'
				,showOn:"button"
				,buttonImage:"./modules/counter/tpl/images/buttonCalendar.gif"
				,buttonImageOnly:false
				,mandatory:true
				,onSelect:function(){
					$("#str_selected_date").html(this.value);
					$("#selected_date").val(this.value.replace(/-/g,''));
					moveDate();
				}
			};
	
			$.extend(option,$.datepicker.regional['{$lang_type}']);
			$(".inputDate").datepicker(option);
		});
	})(jQuery);
	</script>
</form>
<ul class="x_nav x_nav-tabs" cond="$module_info">
	<li loop="$lang->cmd_select_counter_type => $key,$val" class="x_active"|cond="$type==$key"><a href="{getUrl('type',$key)}">{$val}</a></li>
</ul>

<!-- 일자를 옮기는 form -->
<form action="./" method="get" id="fo_counter">
    <input type="hidden" name="module" value="{$module}" />
    <input type="hidden" name="act" value="{$act}" />
    <input type="hidden" name="selected_date" value="{$selected_date}" />
</form>

<!-- unique visitor 그래프 -->
<table class="x_table x_table-striped x_table-hover">
	<tr loop="$detail_status->list => $key,$val">
		<!--@if($detail_status->sum>0)-->
			{@$percent = sprintf("%0.2f", $val / $detail_status->sum * 100 )}
			{@$img_width = sprintf("%0.0f", $val / $detail_status->max * 100 )}
		<!--@else-->
			{@$percent = 0}
			{@$img_width = 1}
		<!--@end-->
		<th scope="row" cond="Context::getLangType()=='en'">
			<!--// 시간대별 -->
			<!--@if($type == 'year')-->
				<em>{$key}</em>
			<!--@elseif($type == 'month')-->
				<em>{$key}</em>
			<!--@elseif($type == 'day')-->
				<em>{$key}</em> {$lang->unit_day}
			<!--@else-->
				<em>{$key}</em>
			<!--@end-->
		</th>
		<th scope="row" cond="Context::getLangType()!='en'">
			<!--// 시간대별 -->
			<!--@if($type == 'year')-->
				<em>{$key}</em> {$lang->unit_year}
			<!--@elseif($type == 'month')-->
				<em>{$key}</em> {$lang->unit_month}
			<!--@elseif($type == 'day')-->
				<em>{$key}</em> {$lang->unit_day}
			<!--@else-->
				<em>{$key}</em> {$lang->unit_hour}
			<!--@end-->
		</th>
		<td>
			{@$img_percent = $percent-30}
			<!--@if($img_percent<1)-->
				<img class="graphHr" style="height:10px;width:3px;" alt="" src="../../counter/tpl/images/iconBar.gif" />
			<!--@else-->
				<img class="graphHr" style="height:10px;width:{$img_percent}%;" alt="" src="../../counter/tpl/images/iconBar.gif" />
			<!--@end-->
			{number_format($val)}({$percent}%) 
		</td>
	</tr>
</table>
